<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#ffffff" />
    <link rel="manifest" href="./manifest.json" />
    <meta
      name="description"
      content="Author: cooker, pic: net, This is a website I make to learn web."
    />
    <title>Blog</title>
    <link rel="icon" href="images/favicon.ico">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Main css -->
    <link rel="stylesheet" href="css/style.css">

    <style type="text/css">
      body {
        margin: 0;
        height: 100vh;
      }

      header {
        position: relative;
        top: 0;
        left: 0;
      }

      .global-header {
        display: flex;
        align-items: center;
        max-width: 1000px;
        margin: auto;
        height: 60px;
        padding: 0 17px;
      }

      .logo {
        margin-right: 19px;
      }

      .nav {
        display: flex;
        overflow: hidden;
      }

      .nav a {
        color: #000;
        text-align: center;
        line-height: 22px;
        padding: 10px;
        margin: 0px 15px;
        text-decoration: none;
        font-size: 16px;
      }

      .nav a:hover {
        color: gray;
      }

      .search-part {
        flex: 1 1;
        justify-content: flex-end;
        padding: 10px 0px;
        align-items: center;
      }

      .search-wrap {
        display: flex;
        flex: 1 1;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        margin-left: 19px;
      }

      .search-wrap input {
        flex: 1 1;
        border-width: 0;
        padding: 8px;
      }

      .search-wrap a {
        border-left: 1px solid #e5e5e5;
        line-height: 22px;
      }

      .global-header:after {
        content: "";
        display: block;
        height: 1px;
        background: #e5e5e5;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
      }

      main {
        display: flex;
        flex-direction: column;
        max-width: 1000px;
        padding: 10px 17px;
        margin: auto;
      }

      .section-header {
        display: flex;
        margin: 18px auto;
        align-items: center;
      }

      .title {
        flex: 1 1;
        font-size: 24px;
        line-height: 33px;
      }

      .more {
        font-size: 16px;
        line-height: 22px;
      }

      .card-wrap {
        display: flex;
        margin: -10px -10px;
      }

      .card {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 0 10px;
        margin: 0 0 20px 0;
        /* border: 1px solid saddlebrown; */
      }

      .article-title {
        margin: 8px 0 0 0;
        font-size: 14px;
        line-height: 20px;
      }

      .footer {
        background-color: aliceblue;
        text-align: center;
        padding: 20px;
        font-size: 12px;
      }
      .card img {
        width: 100%;
        aspect-ratio: 2/1;
      }
    </style>
  </head>

  <body>
    <!-- 头部 -->
    <header>
      <div class="global-header">
        <div class="logo">
          <img
            src="./images/profile-image.png"
            alt="logo"
            height="60px"
            style="aspect-ratio: 1/1"
          />
        </div>
        <div class="nav">
          <a href="./">选项1</a>
          <a href="./">选项1</a>
          <a href="./">选项1</a>
          <a href="./">选项1</a>
          <a href="./">选项1</a>
          <a href="./">选项1</a>
        </div>
        <div class="search-part">
          <div class="search-wrap">
            <input type="search" name="搜索栏" placeholder="搜索" />
            <a href="./"
              ><img
                style="aspect-ratio: 1/1"
                src="./images/search.png"
                alt="搜索"
                width="38px"
            /></a>
          </div>
        </div>
      </div>
    </header>
    <!-- 正文 -->
    <main>
      <!-- banner -->
      <div class="banner">
        <img
          src="./images/banner2.jpg"
          alt="banner"
          width="100%"
          height="200px"
        />
      </div>
      <!-- 内容 -->
      <div class="content-wrap">
        <!-- 主题 -->
        <div class="section-header">
          <div class="title">日常博客</div>
          <div class="more">查看更多</div>
        </div>
        <div class="card-wrap">
          <div class="card">
            <a href="./blogs/C++11NewFeature.html">
              <img src="./images/article1.jpg" alt="图1" width="100%" />
              <div class="article-title">C++11新特性</div>
            </a>
          </div>
          <div class="card">
            <a href="./blogs/C++InterviewQuestions.html">
              <img src="./images/article1.jpg" alt="图1" width="100%" />
              <div class="article-title">C++常见面试题</div>
            </a>
          </div>
          <div class="card">
            <a href="./blogs/5IOModels.html">
              <img src="./images/article1.jpg" alt="图1" width="100%" />
              <div class="article-title">五种I/O模型</div>
            </a>
          </div>
        </div>
      </div>
      <div class="content-wrap">
        <!-- 主题 -->
        <div class="section-header">
          <div class="title">主题2</div>
          <div class="more">查看更多</div>
        </div>
        <div class="card-wrap">
          <div class="card">
            <img src="./images/article2.jpg" alt="图2" width="100%" />
            <div class="article-title">文章题目</div>
          </div>
          <div class="card">
            <img src="./images/article2.jpg" alt="图2" width="100%" />
            <div class="article-title">文章题目</div>
          </div>
          <div class="card">
            <img src="./images/article2.jpg" alt="图2" width="100%" />
            <div class="article-title">文章题目</div>
          </div>
        </div>
      </div>
      <div class="content-wrap">
        <div class="section-header">
          <div class="title">题目3</div>
          <div class="more">查看更多</div>
        </div>
        <div class="card-wrap">
          <div class="card">
            <img src="./images/article3.jpg" alt="图3" width="100%" />
            <div class="article-title">文章题目</div>
          </div>
          <div class="card">
            <img src="./images/article3.jpg" alt="图3" width="100%" />
            <div class="article-title">文章题目</div>
          </div>
          <div class="card">
            <img src="./images/article3.jpg" alt="图3" width="100%" />
            <div class="article-title">文章题目</div>
          </div>
        </div>
      </div>
    </main>
    <!-- 页脚 -->
    <footer>
      <div class="footer">
        <p>Copyright © 2024 我的博客</p>
        <a href="https://www.cnblogs.com/yubo-guan">博客园</a>
        <p>皖ICP备2024042518号</p>
      </div>
    </footer>
    <script>
      if ("serviceWorker" in navigator) {
        window.addEventListener("load", function () {
          navigator.serviceWorker.register("sw.js");
        });
      }
    </script>
  </body>
</html>
